<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		td {
			background-color: darkgrey;
			width: 100px;
			height: 100px;
		}
		
		table {
			position: absolute;
			top: 100px;
			left: 40%;
		}
		
		.td1 {
			background-color: white;
		}
		
		#main {
			display: none;
   			text-align: center;
			width: 200px;
			height: 150px;
			text-align: center;
			border: 3px double darkslateblue;
			margin-left: 580px;
			margin-top: 430px;
			background-color: aliceblue;
			text-align: center;
			line-height: 150px;
			font-size: 22px;
			font-weight: bold;
			color: darkslateblue;
		}
	</style>

	<body>
		<div id="main" >
			恭喜过关！
		</div>
		<table id="tab" border="1" cellspacing="0" cellpadding="0">

		</table>
		<script type="text/javascript">
			var tab = document.getElementById("tab");
			var num = 3;
			createTab();

			function createTab() {
				tab.innerHTML = "";
				for(var i = 0; i < num; i++) {
					var row = tab.insertRow();
					for(var k = 0; k < num; k++) {
						row.insertCell();
					}
				}

				var tds = tab.getElementsByTagName("td");
				for(var i = 0; i < tds.length; i++) {
					//  console.log(this.parentNode)

					tds[i].onclick = function() {
						var rowindex = this.parentNode.rowIndex;
						var cellindex = this.cellIndex;
						for(var i = 0; i < tds.length; i++) {
							if(tds[i].parentNode.rowIndex == rowindex || tds[i].cellIndex == cellindex) {
								if(tds[i].className) {
									tds[i].className = ""
								} else {
									tds[i].className = "td1"

								}

							}
						}
						getFullTdClass();
					};
				}
			}
			var tds = tab.getElementsByTagName("td");

			function getFullTdClass() {
				var iscg = true;
				for(var i = 0; i < tds.length; i++) {
					if(tds[i].className == "") {
						iscg = false;
						break;
					}
				}
				if(iscg) {
					document.getElementById("main").style.display = "block"
					setTimeout(function() {
						num++;
						createTab();
						document.getElementById("main").style.display = "none"

					}, 3000);
				}
			}
		</script>
	</body>

</html>